<template>
  <div>
    <list ref="list" :disabled="!$permission.can('READ')">
      <template #toolbar-left>
        <el-button @click="create" type="primary" :disabled="!$permission.can('EDIT')">创建角色</el-button>
      </template>
      <template #column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template v-slot="{ row }">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="editById(row.id)"
              :disabled="row.id < 0 || !$permission.can('EDIT')" />
            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteById(row.id)"
              :disabled="row.id < 0 || !$permission.can('EDIT')" />
          </template>
        </el-table-column>
      </template>
    </list>
    <edit-dialog ref="editDialog" @close-saved="reload" />
  </div>
</template>
<script>
import list from "@/components/sys/role/list";
import editDialog from "@/components/sys/role/editDialog";

export default {
  components: {
    list,
    editDialog,
  },
  mounted() {
    this.reload();
  },
  data() {
    return {};
  },
  methods: {
    reload() {
      this.$refs.list.reload();
    },
    async create() {
      await this.$refs.editDialog.showCreate();
    },
    async editById(id) {
      await this.$refs.editDialog.showEditById(id);
    },
    async deleteById(id) {
      await this.$refs.list.deleteById(id);
    }
  },
};
</script>